<script setup>
import ArrowIcon from '@/components/svgComponents/ArrowIcon.vue'
import LfButton from '@/components/commonUI/LfButton.vue'
import { useTopicManageStore } from '@/stores/TopicManageStore'
import { useRoute } from 'vue-router'
const topicManageStore = useTopicManageStore()
const route = useRoute()
const props = defineProps({
  isPrivate: {
    type: Boolean,
    default: false,
  }, // 为单独修改
  required: {
    type: Boolean,
    default: false,
  },
  label: {
    type: String,
    required: true,
  },
  value: {
    type: String,
    default: '',
  },
  type: {
    type: String,
    default: 'text',
  },
  maxLength: {
    type: Number,
    default: 100,
  },
  placeholder: {
    type: String,
    default: '',
  },
})

const isFocus = ref(false)
const inputRef = ref(null)

const emit = defineEmits(['change'])

const handleFocus = () => {
  isFocus.value = true
}

const handleBlur = () => {
  isFocus.value = false
}

const handleClick = () => {
  if (props.isPrivate) {
    // return
    topicManageStore.showTopicSetting()
    topicManageStore.setTopicSettingData({
      label: props.label,
      value: props.value,
      topicId: route.params.topicId,
    })
  } else {
    isFocus.value = true
    inputRef.value.focus()
  }
}

const handleChange = (e) => {
  emit('change', e.target.value)
}
</script>

<template>
  <div class="p-2 hover:border-[--line-b] box-border relative" @click="handleClick">
    <div class="flex items-center justify-between">
      <div class="flex flex-col gap-1 w-full">
        <div class="text-sm text-[--text-3] flex items-center gap-1">
          {{ label }}
          <span v-if="required" class="text-[--text-1]">*</span>
        </div>

        <input
          v-if="type === 'text'"
          :disabled="isPrivate"
          ref="inputRef"
          type="text"
          class="w-full disabled:bg-[--fill-0]"
          :value="value"
          :maxlength="maxLength"
          @focus="handleFocus"
          @blur="handleBlur"
          @input="handleChange"
          :placeholder="placeholder" />

        <textarea
          v-if="type === 'textarea'"
          :disabled="isPrivate"
          class="w-full disabled:bg-[--fill-0]"
          ref="inputRef"
          :value="value"
          :maxlength="maxLength"
          @focus="handleFocus"
          @blur="handleBlur"
          @input="handleChange"
          :placeholder="placeholder" />

        <div v-if="!isPrivate && type !== 'select'" class="text-xs text-[--text-3] self-end">
          {{ value?.length }}/{{ maxLength }}
        </div>
      </div>

      <div v-if="isPrivate">
        <LfButton icon type="secondary-no-bg"><ArrowIcon direction="right" /></LfButton>
      </div>
    </div>
    <!-- border -->
    <div
      v-if="!isPrivate"
      class="absolute top-0 right-0 border border-[--line-1] rounded-lg w-full h-full"
      :class="isFocus ? 'border-[--line-b] border-2 box-border' : ''"></div>
    <div
      v-else
      class="cursor-pointer absolute top-0 right-0 border border-[--line-1] rounded-lg w-full h-full hover:border-[--line-b] hover:border-2"></div>
  </div>
</template>
